<template>
	<view class="body">
		<view class="header"><image src="../../assets/img/login.png" mode=""></image></view>
		<view class="title"><p>登录</p></view>
		<view class="logindiv">
			<image src="../../assets/img/logo.png" mode=""></image>
			<view class="logintitle"><p>领云教务</p></view>
			<view class="login">
				<view class="username"><input type="text" v-model="ruleform.mobile" placeholder="请输入手机号" placeholder-style="font-size:28rpx;" value="" /></view>
				<view class="pass">
					<input type="password" placeholder="请输入验证码" v-model="ruleform.code" placeholder-style="font-size:28rpx;" value="" />
					<button type="default" @click="getcodes(ruleform.mobile)" :disabled="disabled">{{ codetip }}</button>
				</view>
			</view>
		</view>
		<view class="btn"><button type="default" @click="gologin">登录</button></view>
		<view class="getadmin"><p>没有帐号，立即预约报名>></p></view>
	</view>
</template>

<script>
import { getcode, gologins } from '../../api/index.js';
export default {
	data() {
		return {
			ruleform: {
				mobile: '15031023319',
				code: ''
			},
			codetip: '获取验证码',
			disabled: false,
			time: 60
		};
	},
	methods: {
		async gologin() {
			const params = {
				mobile: this.ruleform.mobile,
				code: this.ruleform.code
			};
			let res = await gologins(params);
			console.log(res);
			if (res.errCode == 10000) {
				uni.setStorageSync('companyid', res.data.userinfo.companyid);
				uni.setStorageSync('token', res.data.token);
				uni.switchTab({
					url: '/pages/index/index'

				})

			}
		},
		async getcodes(mobile) {
			const params = {
				mobile: this.ruleform.mobile
			};
			let res = await getcode(params);
			console.log(res);
			if (res.errCode == 10000) {
				this.gettimer();
			}
		},
		gettimer() {
			this.time = 60;
			this.timer();
		},
		timer() {
			if (this.time > 0) {
				this.disabled = true;
				this.time--;
				this.codetip = this.time + '秒';
				setTimeout(this.timer, 1000);
			} else {
				this.time = 0;
				this.codetip = '发送验证码';
				this.disabled = false;
			}
		}
	}
};
</script>

<style scoped lang="less">
.body {
	width: 750rpx;
	height: 100vh;
	background-color: #f9f9f9;
	.header image {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
	}
	.title {
		position: absolute;
		z-index: 1;
		height: 50rpx;
		width: 100%;
		font-size: 33rpx;
		color: #fff;
		z-index: 1;
		padding-top: 34pt;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.logindiv {
		position: absolute;
		z-index: 1;
		left: 50%;
		top: 35%;
		transform: translate(-50%, -50%);
		width: 92%;
		height: 410rpx;
		border-radius: 15rpx;
		background-color: #fff;
		image {
			width: 165rpx;
			height: 165rpx;
			position: absolute;
			top: -38%;
			left: 50%;
			z-index: 999;
			transform: translate(-50%, 50%);
		}
		.logintitle {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 120rpx;
			font-size: 35rpx;
			font-weight: 600;
		}
		.login {
			position: relative;
			margin-top: 30rpx;
			width: 85%;
			margin-left: 7.5%;
			.username input {
				width: 100%;
				height: 90rpx;
			}
			view:nth-child(1)::after {
				content: ' ';
				position: absolute;
				width: 100%;
				height: 1px;
				border-bottom: 1px solid #cacaca;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}
			.pass {
				display: flex;
			}
			.pass input {
				width: 70%;
				height: 90rpx;
			}
			.pass button::after {
				border: none;
			}
			.pass button {
				padding: 0;
				margin-top: 5rpx;
				font-size: 28rpx;
				color: #2f6ab4;
				display: flex;
				justify-content: center;
				align-items: center;
				border: none;
				width: 30%;
				height: 80rpx;
				background-color: #ffffff;
			}
		}
	}
	.btn button::after {
		border: none;
	}
	.btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		top: 52%;

		button {
			width: 488rpx;
			height: 100%;
			border-radius: 50rpx;
			background-color: #5ca9f1;
			font-size: 32rpx;
			display: flex;
			color: #ffffff;
			justify-content: center;
			align-items: center;
		}
	}
	.getadmin {
		width: 100%;
		height: 100rpx;
		position: absolute;
		top: 65%;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
